<template>
	<view class="admin-user-search-container">
		<input type="text" placeholder="请输入用户名或昵称搜索" v-model="data.searchText"/>
		<view @tap="sendSearch">搜索</view>
	</view>
	<view class="admin-user-body-container">
		<view v-for="(item,index) in data.userList" :key="index">
			<AdminUserItem :userInfo="item"></AdminUserItem>
		</view>
	</view>
	<view class="admin-user-foot">
		<uni-pagination 
			:show-icon="true" 
			:total="data.total" 
			:current="data.current" 
			pageSize="7"
			@change="changePage"
		>
		</uni-pagination>
	</view>
	
</template>

<script>
	import {onMounted,reactive} from 'vue'
	import global from '../../config/global.js'
	import AdminUserItem from '../components/admin-user-item.vue'
	import {onShow} from '@dcloudio/uni-app'
	export default {
		name:'admin-user',
		components:{
			AdminUserItem
		},
		setup(){
			let data = reactive({
				userList:[],
				total:0,
				current:1,
				searchText:"",
				isSearching:false
			})
			
			onShow(()=>{
				getData()
			})
			
			onMounted(()=>{
				getData()
			})
			
			function getData(){
				uni.request({
					url:global.BASE_URL+'/user/all/1',
					method:"GET",
					header:{
						"mytoken":uni.getStorageSync("localtoken")
					},
					success: (res) => {
						console.log(res)
						if(res.data.code){
							data.isSearching = false;
							data.userList = res.data.data.list;
							data.total = res.data.data.total;
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
			
			function changePage(e){
				if(!data.isSearching){
					uni.request({
						url:global.BASE_URL+'/user/all/'+e.current,
						method:"GET",
						header:{
							"mytoken":uni.getStorageSync("localtoken")
						},
						success: (res) => {
							console.log(res)
							if(res.data.code){
								data.userList = res.data.data.list;
								data.total = res.data.data.total;
							}
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}else{
					uni.request({
						url:`${global.BASE_URL}/user/search/${data.searchText}/${e.current}`,
						method:"GET",
						header:{
							"mytoken":uni.getStorageSync("localtoken")
						},
						success: (res) => {
							console.log(res)
							if(res.data.code){
								data.userList = res.data.data.list;
								data.total = res.data.data.total;
							}
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}
				
			}
			
			function sendSearch(){
				if(data.searchText==""){
					getData()
				}else{
					uni.request({
						url:`${global.BASE_URL}/user/search/${data.searchText}/1`,
						method:"GET",
						header:{
							"mytoken":uni.getStorageSync("localtoken")
						},
						success: (res) => {
							if(res.data.code){
								data.isSearching = true
								data.userList = res.data.data.list;
								data.total = res.data.data.total;
							}
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}
				
			}
			
			return {
				data,
				changePage,
				sendSearch
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.admin-user-search-container{
		width: 700rpx;
		top: 20rpx;
		left: 25rpx;
		display: flex;
		position: fixed;
		height: 85rpx;
		
		input{
			width: 480rpx;
			padding: 0rpx 10rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 35rpx;
			border: 2rpx solid #9BCDD2;
		}
		
		view{
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 35rpx;
			border: 2rpx solid #9BCDD2;
			background-color: #9BCDD2;
			color: white;
			text-align: center;
		}
	}
	
	.admin-user-body-container{
		width: 700rpx;
		margin: 10rpx 25rpx;
		margin-top: 140rpx;
	}
	
	.admin-user-foot{
		width: 700rpx;
		margin:20rpx 25rpx;
	}
</style>
